JSHintの結果を静的レポートとして出力する。
はじめに
現在私が参画している開発では、 AngularJS generatorで作成した雛形をもとに開発を進めております。
AngularJS generatorの導入等に関しては以下の記事を参照ください。
雛形内のGruntタスクにはJshintでのチェックは行われているのですが、 あくまでターミナルで出力されるといった形のため、 レポートとして出力したいといったニーズが出てきます。
そういった際にPlatoを導入し、 Gruntタスクで自動的にレポートを生成・出力までを行っていきたいと思います。
Platoをインストール
GruntのタスクとしてPlatoを導入したいので、grunt-platoをインストールします。
npm install --save-dev grunt-plato
また、タスクとして実行した際に自動的にレポートが開くように、 grunt-openをインストールします。
npm install --save-dev grunt-open
JSHintのバージョンをあげる。
JSHintは2.5.0になった段階で、インデント系のエラーを出さないように変更されました。
AngularJS generatorで作った場合用いているJSHintのバージョンが2.5.0系ではないため、 2.5.0系で統一したいと思います。
また、gruntのタスクで動いているJSHintも2.5.0系で動くように修正したいと思います。
Gruntのタスクで用いているgrunt-contrib-jshintを0.10.0にアップデートする事で、 JSHint 2.5.0で動く事となります。
package.json
"grunt-contrib-jshint": "~0.10.0",
変更後、パッケージの再度インストールを行います。
npm install
Plato側をJSHint 2.5.0で動かす為には、 grunt-plato内のplatoのjshintのバージョンを書き換えます。
node_modules/grunt-plato/node_modules/plato/package.json
"jshint": "~2.5.0"
当該ディレクトリのモジュールを更新する必要があるため、以下のコマンドを実行します。
pushd node_modules/grunt-plato/node_modules/plato && npm install && popd
Gruntタスクの調整
Gruntfile内にタスクを記載していきます。 GruntタスクのJSHintは設定ファイルである.jshintrc内にコメントを書いても動くのですが、 Plato側はコメントのある.jshintrcを読もうとするとエラーとなる為対応を行います。
Gruntfile.js
var trimJshintrc = function (jshintrc) {
var jshintCli = require('./node_modules/grunt-plato/node_modules/plato/node_modules/jshint/src/cli.js');
var config = jshintCli.loadConfig(jshintrc);
delete config.dirname;
return config;
};
platoのタスクとレポートを自動で開くためのタスクを記述します。
Gruntfile.js
plato: {
report: {
options: {
jshint: trimJshintrc('.jshintrc'),
},
files: {
'reports': [
'Gruntfile.js',
'<%= yeoman.app %>/scripts/{,*/}*.js'
]
}
}
},
open: {
report: {path: 'reports/index.html'}
},
レポートを生成する前に、以前のレポートを削除を行います。
Gruntfile.js
clean: {
dist: {
files: [{
dot: true,
src: [
'.tmp',
'<%= yeoman.dist %>/*',
'!<%= yeoman.dist %>/.git*'
]
}]
},
server: '.tmp',
report: 'reports'
},
これらのタスクをGruntから呼べるようにタスクとしてまとめます。
Gruntfile.js
grunt.registerTask('report',[
'clean:report',
'plato:report',
'open:report'
]);
正しく設定されれば、Gruntのreportタスクとしてレポートの生成・表示が行えるようになります。
grunt report
なお、上記で作成したGruntfile.jsをgistで公開してますので、そちらも参照ください。
最後に
開発を進めていた際に、プロジェクトのリーダーから JSHintの結果をレポートとしてみたいと言った話が出たので、その対応したのがきっかけです。
個々のソースは下記の記事にあるように、開発環境から見る事が可能ですが、 全体としてどうなのかといったことを参照する事もあるかと思います。
その際に、上記で生成したレポートを用いることで容易に状況を把握し、 プロジェクトを進める際の判断材料になるのでは無いでしょうか。
